<template>
  <div class="login">
    <div class="left">
      <img src="../assets/images/login.png" alt="" />
    </div>
    <div class="right">
      <div class="right-title">开源鸿蒙成长计划报名系统</div>
      <div class="right-edit">
        <div class="right-edit-top">
          <el-form :model="ruleForm" ref="ruleForm">
            <el-form-item label="">
              <el-input
                v-model.trim="ruleForm.userName"
                autocomplete="off"
                placeholder="请输入用户名"
                prefix-icon="el-icon-lefuser iconfont"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                type="password"
                v-model.trim="ruleForm.phone"
                autocomplete="off"
                placeholder="请输入密码"
                prefix-icon="el-icon-lefpassword iconfont"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="right-edit-login">
          <el-button type="primary" @click="login">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        // userName: "admin",
        // phone: "15011831642",
        userName: "",
        phone: "",
      },
    };
  },
  methods: {
    async login() {
      let res = await this.$axios.get("/login/backstageLogin", {
        params: { ...this.ruleForm },
      });
      if (res.data.code == 0) {
        this.$message.success(res.data.msg);
        this.$router.push("/mainTest");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f4f4;
  .left {
    width: 640px;
    height: 353px;
  }
  .right {
    width: 338px;
    height: 353px;
    margin-left: 110px;
    margin-top: 75px;
    .right-title {
      height: 50px;
      background: #f9fbfe;
      border: 1px solid rgba(112, 112, 112, 0.2);
      border-radius: 2px 2px 0px 0px;
      font-size: 16px;
      font-weight: bold;
      color: #000000;
      text-shadow: 5px 10px 50px rgba(0, 0, 0, 0.16);
      opacity: 0.72;
      text-align: center;
      line-height: 48px;
      box-sizing: border-box;
    }
    .right-edit {
      height: calc(100%-48px);
      padding: 32px 27px 30px;
      background-color: #fff;
      .right-edit-top {
        ::v-deep .el-form-item {
          margin-bottom: 20px;
          .el-form-item__content {
            .el-input {
              font-size: 12px;
            }
          }
        }
      }
      .right-edit-login {
        margin-bottom: 32px;
        ::v-deep .el-button--primary {
          width: 100%;
          height: 40px;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
